<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试websocket-1</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <hr/>
    <form class="form-inline">
        <label for="url">地址:&nbsp;&nbsp;</label>
        <input type="text" class="form-control" id="url" placeholder="输入地址">
        <label for="userCode">用户:&nbsp;&nbsp;</label>
        <input type="text" class="form-control" id="userCode" placeholder="输入用户ID">
        <label for="userCode">组:&nbsp;&nbsp;</label>
        <input type="text" class="form-control" id="group" placeholder="输入组">
    </form>
    <hr/>
    <form class="form-inline">
        &nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="connect()">链接</button>
        &nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="disconnect()">断开</button>
        &nbsp;&nbsp;
        <label for="respType">发送类型:</label>
        &nbsp;&nbsp;
        <select class="form-control" id="respType" name="respType">
            <option value="0">单用户</option>
            <option value="2">广播</option>
            <option value="3">分组</option>
        </select>
        &nbsp;&nbsp;
        <input type="text" class="form-control" id="toUserCode" name="toUserCode" placeholder="输入发送人的ID或组ID">
        &nbsp;&nbsp;
        <input type="text" class="form-control" id="content" name="content" value="hello" placeholder="内容...">
        &nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="send()">发送</button>
        &nbsp;&nbsp;
    </form>

    <div></div>
    <hr/>
    <h5>当前用户： <span class="label text-info" id="pp"></span></h5>
    <h5>状态： <span class="label text-primary" id="tt">待连接...</span></h5>
</div>
<script src="/webjars/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script src="/webjars/bootstrap/4.4.1-1/js/bootstrap.min.js"></script><!---->
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script src="/webjars/sockjs-client/1.1.2/sockjs.js"></script>
<script src="/webjars/stomp-websocket/2.3.3-1/stomp.js"></script>
<script src="/layer/layer.js"></script>
<script language=javascript>

    let sendMessage = null;
    let disConnect = null;
    let client=null;
    let userCode=null;
    let group=null;
    let url=null;
    function connect() {
        init()
    }

    function init(){
        url =$("#url").val();
        userCode = $("#userCode").val();
        if(!url){
            layer.alert("请输入地址",{icon:5});
            return;
        }
        if(!userCode){
            layer.alert("请输入用户ID",{icon:5});
            return;
        }
        group = $("#group").val();
        let socket = new SockJS(url);
        client = Stomp.over(socket);
        client.connect({
            userCode: "web_"+userCode,
            group: group
        }, function (result) {
            console.log(result);
            $("#pp").text(userCode);
            layer.msg("用户（"+userCode + "）连接成功",{icon:7,time:3000});
            $("#tt").text("已连接");
            $("#tt").removeClass("text-warning text-primary");
            $("#tt").addClass("text-success");

            client.subscribe("/topic/public", function (res) {
                layer.msg('用户发的全局消息\n：'+res.body,{icon:6,time:5000});
            });

            client.subscribe("/message/public", function (res) {
                layer.msg('全局消息\n：'+res.body,{icon:6,time:5000});
            });
            client.subscribe("/user/message", function (res) {
                layer.msg('个人消息\n：'+res.body,{icon:1,time:5000});
            });

            client.subscribe("/user/topic/group", function (res) {
                layer.msg('组消息\n：'+res.body,{icon:6,time:5000});
            });


            client.subscribe("/user/topic/chat", function (res) {
                layer.msg('用户发的个人消息\n：'+res.body,{icon:1,time:5000});
            });
        }, function (error) {
            console.log("连接错误");
            resolveError();
            setTimeout(init(),10000);
            layer.msg("10秒后重连...",{icon:7,time:1500});
        });

    }

    sendMessage = function (destination, headers, body) {
        client.send(destination, headers, body)
    };
    disConnect = function () {
        client.disconnect();
        resolveError();
    }
    function resolveError(){
        $("#pp").text("");
        $("#tt").text("连接关闭,待连接...");
        $("#tt").removeClass("text-primary text-success");
        $("#tt").addClass("text-warning");
        layer.msg("用户（"+userCode + "）连接关闭",{icon:7,time:1500});
    }
    function disconnect() {
        disConnect();
    }

    //发送聊天信息
    function send() {
        let respType=$("#respType").val();
        let messageModel = {};
        messageModel.respType = respType;
        messageModel.content = $("#content").val();

        if(respType==0){
            messageModel.to="web_"+$("#toUserCode").val();
            sendMessage("/app/privateMessage", {}, JSON.stringify(messageModel));
        }else if(respType==2){
            messageModel.to="web_"+$("#toUserCode").val();
            sendMessage("/app/publicMessage", {}, JSON.stringify(messageModel));
        } else if(respType==3){
            messageModel.to=$("#toUserCode").val();
            sendMessage("/app/groupMessage", {}, JSON.stringify(messageModel));
        }

    }
</script>
</body>
</html>